<!DOCTYPE html>
<html>

<!-- Head -->

<head>
    <title>修改表单</title>

    <!-- Meta-Tags -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="css/layer.css">
    <script type="application/x-javascript">
        addEventListener("load", function () {
            setTimeout(hideURLbar, 0);
        }, false);

        function hideURLbar() {
            window.scrollTo(0, 1);
        }
    </script>
    <!-- //Meta-Tags -->

    <!-- Style -->
    <link rel="stylesheet" href="css/common.css" type="text/css" media="all">
</head>
<!-- //Head -->

<!-- Body -->

<body>
<h1>XBiaoShop</h1>
<div class="container w3layouts agileits pr">
    <a href="index.html" class="back"></a>
    <div class="register w3layouts agileits">
        <h2>修 改 密 码</h2>
        <form action="#" method="post" class="pr oh">
            <input type="text" v-model="user.username" Name="Name" placeholder="用户名" required="">
            <input type="password" v-model="user.password" Name="Password" placeholder="新密码" required="">
            <input type="email" v-model="user.email" Name="Email" placeholder="邮箱" required="">
            <input type="text" v-model="code" Name="code" placeholder="验证码" required="">
            <div class="btnCode">
                <input type="button" @click="sendCode()" class="btn btn-info" value="发送验证码">
            </div>
        </form>
        <div class="send-button w3layouts agileits">
            <input type="submit" @click="changePassword()" value="重  置">
        </div>
        <div class="clear"></div>
    </div>
    <div class="clear"></div>
</div>
<div class="footer w3layouts agileits">
    <p>Copyright &copy; 2020.XB All rights reserved.</p>
</div>
</body>
<!-- //Body -->
<script src="js/jquery-2.2.3.min.js"></script>
<script src="vue/vue-2.6.11.js"></script>
<script src="vue/axios-0.19.2.min.js"></script>
<script src="vue/layer.js"></script>
<script>
    vm = new Vue({
        el: '.container',  //选中整个main
        data: {
            user: {
                username: '',
                email: '',
                password: ''
            },//初始化对象
            code: ''
        },
        methods: {
            changePassword: function () {
                if (this.user.email =='' || this.user.email.length <= 0) {
                    layer.msg("邮箱不能为空！！！");
                    alert("邮箱不能为空！！！")
                }
                else if (this.user.username === '' || this.user.email.length <= 0) {
                    layer.msg("邮箱不能为空！！！");
                    alert("用户名不能为空！！！")
                }
                else if (this.user.password == '' || this.user.email.length <= 0) {
                    layer.msg("邮箱不能为空！！！");
                    alert("密码不能为空！！！")
                }
                else if (this.code =='' || this.user.email.length <= 0) {
                    layer.msg("邮箱不能为空！！！");
                    alert("验证码不能为空！！！")
                }
                else {
                    axios.put(`user/forget/${this.code}`, this.user).then(res => {
                        if (res.data.success) {
                            layer.msg(res.data.msg);
                            location.href = 'index.html';
                        } else {
                            layer.msg(res.data.msg);
                            alert(res.data.msg);
                        }
                    }).catch(error => {
                        alert(error.message)
                        layer.msg(error.message)
                    });
                }
            },
            sendCode: function () {      //发送邮箱验证码
                if (this.user.email != '') {
                    axios.get(`email/send/${this.user.email}`).then(res => {
                        if (res.data.success) {
                            alert(res.data.msg);
                            // layer.msg("邮箱不能为空");
                            layer.msg(res.data.msg);
                        } else {
                            alert(res.data.msg);
                            // layer.msg("发送验证码失败");
                        }
                    }).catch(error => {
                        // layer.msg(res.data.msg)
                    });
                } else {
                    alert('邮箱不能为空');
                    layer.msg("邮箱不能为空");
                }
            }
        },
    });
</script>
</html>